<template>
  <t-form ref="form" reset-type="initial" :data="formData">
    <t-form-item :label="t('common.title')" size="small">
      <t-input v-model="formData.title" show-limit-number maxlength="255" />
    </t-form-item>
    <t-form-item :label="t('common.description')" size="small">
      <t-textarea v-model="formData.description" resize="none" show-limit-number maxlength="255" />
    </t-form-item>
    <t-form-item :label="t('pages.content.content')" class="editor">
      <ai-editor v-model="formData.content.content"></ai-editor>
    </t-form-item>
  </t-form>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

import AiEditor from '@/components/aieditor/index.vue';
import { t } from '@/locales';

import { PageFormData, PageFormDataType } from '../constants';

const formData = ref({ ...PageFormData });

const setData = (data: PageFormDataType) => {
  formData.value = data;
};

const getData = () => {
  return JSON.parse(JSON.stringify(formData.value));
};

defineExpose({
  setData,
  getData,
});
</script>
